<template>
<div class="commonBox5 pad15 right10">
    <p>
        <span class="tit2">活动开展情况</span>
    </p>
    <div ref="chart1" class='top20 ' style="width: 100%; height: 300px" />
</div>
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
export default {
    components: {},
    props: {},
    data() {
        return {
            chartData: {
                data1: ['参加人数', '举办次数'],
                data2: [{name: '阅读'},{name: '户外运动'},{name: '手工'},{name: '桥牌'},{name: '象棋'},{name: '老年大学'},{name: '看电影'}],
                data3: [312,331,42,42,423,423,423],
                data4: [212,231,32,32,323,323,323],
                color: ['#AC9CFF','#6CCAC9']
            }
        };
    },
    computed: {},
    watch: {},
    created() {
        const t = this;
    },
    mounted() {
        const t = this;
        t.initChart();
    },
    methods: {
        initChart() {
            this.chart = echarts.init(this.$refs.chart1, "macarons");
            this.setOptions();
        },
        setOptions() {
            const t = this;
            this.chart.setOption({
                tooltip: {},
                color: t.chartData.color,
                legend: {
                    top: 0,
                    right: 0,
                    data: t.chartData.data1
                },
                radar: {
                    // shape: 'circle',
                    name: {
                        textStyle: {
                            color: '#333',
                        }
                    },
                    indicator: t.chartData.data2
                },
                series: [{
                    type: 'radar',
                    // areaStyle: {normal: {}},
                    data: [{
                            value: t.chartData.data3,
                            name: t.chartData.data1[0]
                        },
                        {
                            value: t.chartData.data4,
                            name: t.chartData.data1[1]
                        }
                    ]
                }]
            })
        }
    }
};
</script>

<style lang="scss" scoped>
</style>
